<template>
  <van-skeleton :row="20" :loading="!agreementDetailInfo?.roomId">
    <!-- 自定义导航栏 -->
    <van-nav-bar
      fixed
      placeholder
      :title="getNavTitle()"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="agreement-page">
      <!-- 背景装饰元素 -->
      <div class="background-decoration">
        <div class="floating-shape shape-1"></div>
        <div class="floating-shape shape-2"></div>
        <div class="floating-shape shape-3"></div>
        <div class="gradient-overlay"></div>
      </div>
      
      <div class="page-content">
      <!--    签约公寓-->
      <div class="section-container">
        <div class="section-header">
          <div class="section-icon apartment-icon">
            <van-icon name="home-o" />
          </div>
          <h3 class="section-title">签约公寓</h3>
        </div>
        <div class="card-container">
          <div class="modern-card apartment-card" @click="goApartmentDetail()">
            <div class="card-image-wrapper">
              <van-image
                class="card-image"
                :src="agreementDetailInfo.apartmentGraphVoList?.[0]?.url || ''"
                fit="cover"
              >
                <template v-slot:error>
                  <div class="image-error">
                    <van-icon name="photo-fail" />
                    <span>加载失败</span>
                  </div>
                </template>
                <template v-slot:loading>
                  <div class="image-loading">
                    <van-loading type="spinner" size="20" />
                  </div>
                </template>
              </van-image>
              <div class="image-overlay">
                <van-icon name="eye-o" class="view-icon" />
                <span>查看详情</span>
              </div>
            </div>
            <div class="card-content">
              <h4 class="card-title">{{ agreementDetailInfo.apartmentName || '' }}</h4>
              <div class="card-subtitle">
                <van-icon name="location-o" class="location-icon" />
                <span>点击查看公寓详情</span>
              </div>
            </div>
            <div class="card-arrow">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
      
      <!--    签约房间-->
      <div class="section-container">
        <div class="section-header">
          <div class="section-icon room-icon">
            <van-icon name="home-o" />
          </div>
          <h3 class="section-title">签约房间</h3>
        </div>
        <div class="card-container">
          <div class="modern-card room-card" @click="goRoomDetail()">
            <div class="card-image-wrapper">
              <van-image
                class="card-image"
                :src="agreementDetailInfo.roomGraphVoList?.[0]?.url || ''"
                fit="cover"
              >
                <template v-slot:error>
                  <div class="image-error">
                    <van-icon name="photo-fail" />
                    <span>加载失败</span>
                  </div>
                </template>
                <template v-slot:loading>
                  <div class="image-loading">
                    <van-loading type="spinner" size="20" />
                  </div>
                </template>
              </van-image>
              <div class="image-overlay">
                <van-icon name="eye-o" class="view-icon" />
                <span>查看详情</span>
              </div>
            </div>
            <div class="card-content">
              <h4 class="card-title">{{ agreementDetailInfo.roomNumber || '' }}房间</h4>
              <div class="card-subtitle">
                <van-icon name="location-o" class="location-icon" />
                <span>点击查看房间详情</span>
              </div>
            </div>
            <div class="card-arrow">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
      <!--    承租人信息-->
      <div class="section-container">
        <div class="section-header">
          <div class="section-icon user-icon">
            <van-icon name="user-o" />
          </div>
          <h3 class="section-title">承租人信息</h3>
        </div>
        <div class="card-container">
          <div class="modern-card user-card">
            <div class="user-avatar">
              <van-icon name="user-circle-o" class="avatar-icon" />
            </div>
            <div class="user-info">
              <h4 class="user-name">{{ agreementDetailInfo.name || '未填写' }}</h4>
              <div class="user-details">
                <div class="detail-item">
                  <van-icon name="phone-o" class="detail-icon" />
                  <span class="detail-label">手机号码</span>
                  <span class="detail-value">{{ agreementDetailInfo.phone || '未填写' }}</span>
                </div>
                <div class="detail-item">
                  <van-icon name="contact" class="detail-icon" />
                  <span class="detail-label">身份证号</span>
                  <span class="detail-value">{{ agreementDetailInfo.identificationNumber || '未填写' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--    租约详情-->
      <div class="section-container">
        <div class="section-header">
          <div class="section-icon lease-icon">
            <van-icon name="description" />
          </div>
          <h3 class="section-title">租约详情</h3>
        </div>
        <div class="card-container">
          <div class="modern-card lease-card">
            <div class="lease-details">
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="calendar-o" class="detail-icon" />
                  <div class="detail-content">
                    <span class="detail-label">租期</span>
                    <span class="detail-value">{{ leaseTermInfo.text || '未设置' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="calendar-o" class="detail-icon" />
                  <div class="detail-content">
                    <span class="detail-label">合同租期</span>
                    <span class="detail-value">{{ leaseDate || '未设置' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="contact" class="detail-icon" />
                  <div class="detail-content">
                    <span class="detail-label">身份证号</span>
                    <span class="detail-value">{{ agreementDetailInfo.identificationNumber || '未填写' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="gold-coin-o" class="detail-icon rent-icon" />
                  <div class="detail-content">
                    <span class="detail-label">租金</span>
                    <span class="detail-value price">{{ rentText || '未设置' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="shield-o" class="detail-icon deposit-icon" />
                  <div class="detail-content">
                    <span class="detail-label">押金</span>
                    <span class="detail-value price">{{ depositText || '未设置' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="detail-row">
                <div class="detail-item-large">
                  <van-icon name="credit-pay" class="detail-icon payment-icon" />
                  <div class="detail-content">
                    <span class="detail-label">支付方式</span>
                    <span class="detail-value">{{ paymentTypeInfo.text || '未设置' }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 编辑功能 -->
            <div v-if="isAllowEdit" class="edit-actions">
              <van-button 
                v-if="isAllowEdit"
                type="primary" 
                size="small" 
                @click="showPickerLeaseTerm = true"
                class="edit-btn"
              >
                修改租期
              </van-button>
              <van-button 
                v-if="isAllowEdit"
                type="primary" 
                size="small" 
                @click="showPickerPaymentType = true"
                class="edit-btn"
              >
                修改支付方式
              </van-button>
            </div>
            
            <!-- 租期选择器 -->
            <van-popup v-model:show="showPickerLeaseTerm" position="bottom">
              <van-picker
                title="租期"
                :columns="leaseTermColumns"
                @confirm="onConfirmLeaseTerm"
                @cancel="showPickerLeaseTerm = false"
              />
            </van-popup>
            
            <!-- 支付方式选择器 -->
            <van-popup
              v-model:show="showPickerPaymentType"
              position="bottom"
            >
              <van-picker
                title="支付方式"
                :columns="paymentTypeColumns"
                @confirm="onConfirmPaymentType"
                @cancel="showPickerPaymentType = false"
              />
            </van-popup>
          </div>
        </div>
      </div>
      <!--    按钮-->
      <div class="main-container py-[20px]">
        <van-button
          v-if="isAllowEdit && isRenew"
          type="primary"
          block
          round
          class="m-t-20"
          @click="submitHandle"
        >
          {{ isAddRenew ? "确认续约" : "保存" }}
        </van-button>
        <!--      确认签约-->
        <van-button
          v-if="isConfirmAgreement"
          type="primary"
          block
          round
          class="m-t-20"
          @click="submitHandle"
        >
          确认签约
        </van-button>
        <!--      确认状态按钮 - 用于待确认状态的租约-->
        <van-button
          v-if="showConfirmStatusButton"
          type="primary"
          block
          round
          class="m-t-20"
          @click="confirmStatusHandle"
        >
          {{ getConfirmButtonText() }}
        </van-button>
      </div>
      </div>
    </div>
    
    <!-- 底部固定按钮区域 -->
    <div v-if="showNavConfirmButton || showNavCancelButton" class="bottom-actions">
      <!-- 确认按钮 -->
      <van-button
        v-if="showNavConfirmButton"
        type="primary"
        size="large"
        round
        @click="confirmStatusHandle"
        class="bottom-button confirm-btn"
      >
        {{ getConfirmButtonText() }}
      </van-button>
      <!-- 取消按钮 -->
      <van-button
        v-if="showNavCancelButton"
        type="default"
        size="large"
        round
        @click="cancelStatusHandle"
        class="bottom-button cancel-btn"
      >
        取消
      </van-button>
    </div>
  </van-skeleton>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import type {
  AgreementDetailInterface,
  PaymentInfoInterface,
  TermInfoInterface
} from "@/api/search/types";
import { useRoute, useRouter } from "vue-router";
import { showToast, showDialog } from "vant";
import {
  getAgreementDetailById,
  getPaymentListByRoomId,
  getTermListByRoomId,
  saveOrUpdateAgreement,
  updateStatusById
} from "@/api/search";
import { AgreementSource, AgreementStatus } from "@/enums/constEnums";
const route = useRoute();
const router = useRouter();

// 是否允许修改
const isAllowEdit = ref(route.query.isEdit === "true");
// 是否是新增续约
const isRenew = ref(route.query.isRenew === "true");

const isAddRenew = ref(route.query.isAdd === "true");
// 是否确认签约
const isConfirmAgreement = ref(route.query.isConfirm === "true");
// 公寓的详情信息
const agreementDetailInfo = ref<Partial<AgreementDetailInterface>>({
  id: "",
  // 	承租人姓名
  name: "",
  // phone	承租人手机号码
  phone: "",
  // identificationNumber	承租人身份证号码
  identificationNumber: "",
  // apartmentId	签约公寓id
  apartmentId: "",
  // roomId	签约房间id
  roomId: "",
  // leaseStartDate	租约开始日期
  leaseStartDate: "",
  // leaseEndDate	租约结束日期
  leaseEndDate: "",
  // leaseTermId	租期id
  leaseTermId: "",
  // rent	租金（元/月）
  rent: "",
  // deposit	押金（元）
  deposit: "",
  // paymentTypeId	支付类型id
  paymentTypeId: "",
  // status	租约状态,可用值:1,2,3,4,5,6
  status: AgreementStatus.WAITING,
  // sourceType	租约来源,可用值:1,2
  sourceType: AgreementSource.NEW,
  // additionalInfo	备注信息
  additionalInfo: ""
});
//#region <租期相关>
// 合同租期
const leaseDate = computed(() => {
  return `${dayjs(agreementDetailInfo.value.leaseStartDate).format(
    "YYYY-MM-DD"
  )} 至 ${dayjs(agreementDetailInfo.value.leaseEndDate).format("YYYY-MM-DD")}`;
});
// 租期
const leaseTermInfo = ref({
  text: "",
  value: ""
});
// 监视leaseTermInfo的变化
watch(
  leaseTermInfo,
  newValue => {
    if (newValue) {
      console.log("newValue", newValue);
      // 重赋值租期
      agreementDetailInfo.value.leaseTermId = newValue.value;
      agreementDetailInfo.value.leaseTermMonthCount = +newValue.text.slice(
        0,
        -1
      );
      agreementDetailInfo.value.leaseTermUnit = newValue.text.slice(-1);
      //   重新计算起止日期
      agreementDetailInfo.value.leaseEndDate = dayjs(
        agreementDetailInfo.value.leaseStartDate
      )
        .add(agreementDetailInfo.value.leaseTermMonthCount as number, "month")
        .format("YYYY-MM-DD");
    }
  },
  { immediate: true, deep: true }
);
// 租期的列表
const leaseTermList = ref<TermInfoInterface[]>([]);
// 租期的列表的列
const showPickerLeaseTerm = ref(false);
const leaseTermColumns = computed(() => {
  return leaseTermList.value.map(item => ({
    text: item.monthCount + item.unit,
    value: item.id
  }));
});
// 获取租期列表
const getLeaseTermListHandle = async () => {
  const { data } = await getTermListByRoomId(
    agreementDetailInfo.value.roomId as string
  );
  leaseTermList.value = data;
};
// 确认选择租期
const onConfirmLeaseTerm = (data: {
  selectedOptions: (typeof leaseTermInfo.value)[];
}) => {
  console.log("onConfirmLeaseTerm", data);
  leaseTermInfo.value = data.selectedOptions[0];
  showPickerLeaseTerm.value = false;
};
//#endregion
//#region <支付方式相关>
// 支付方式的列表
const paymentTypeList = ref<PaymentInfoInterface[]>([]);
// 支付方式
const paymentTypeInfo = ref({
  text: "",
  value: ""
});
// 监视paymentTypeInfo的变化
watch(
  paymentTypeInfo,
  newValue => {
    if (newValue) {
      console.log("newValue", newValue);
      // 重赋值支付方式
      agreementDetailInfo.value.paymentTypeId = newValue.value;
      agreementDetailInfo.value.paymentTypeName = newValue.text;
    }
  },
  { immediate: true, deep: true }
);
// 支付方式的列表的列
const showPickerPaymentType = ref(false);
const paymentTypeColumns = computed(() => {
  return paymentTypeList.value.map(item => ({
    text: `${item.name}`,
    value: item.id
  }));
});
// 获取支付方式列表
const getPaymentTypeListHandle = async () => {
  const { data } = await getPaymentListByRoomId(
    agreementDetailInfo.value.roomId as string
  );
  paymentTypeList.value = data;
};
// 确认选择支付方式
const onConfirmPaymentType = (data: {
  selectedOptions: (typeof paymentTypeInfo.value)[];
}) => {
  console.log("onConfirmPaymentType", data);
  paymentTypeInfo.value = data.selectedOptions[0];
  showPickerPaymentType.value = false;
};
//#endregion
//#region <租金、押金相关>
// 租金
const rentText = computed(() => {
  return `${agreementDetailInfo.value.rent}元/月`;
});
// 押金
const depositText = computed(() => {
  return `${agreementDetailInfo.value.deposit}元`;
});

// 是否显示确认状态按钮 - 用户不能自己确认操作，只有管理员可以确认
const showConfirmStatusButton = computed(() => {
  // 用户不能自己确认任何操作，返回false
  return false;
});

// 获取确认按钮文本
const getConfirmButtonText = () => {
  const status = agreementDetailInfo.value.status;
  switch (status) {
    case AgreementStatus.WAITING:
      return "确认签约";
    case AgreementStatus.TO_BE_CONFIRMED:
      return "确认退租";
    case AgreementStatus.RENEW_TO_BE_CONFIRMED:
      return "确认续约";
    default:
      return "确认";
  }
};

// 导航栏标题
const getNavTitle = () => {
  if (isAllowEdit.value && isRenew.value) {
    return isAddRenew.value ? "续约详情" : "编辑租约";
  }
  if (isConfirmAgreement.value) {
    return "确认签约";
  }
  return "租约详情";
};

// 是否显示导航栏确认按钮 - 用户不能自己确认操作
const showNavConfirmButton = computed(() => {
  // 用户不能自己确认任何操作，返回false
  return false;
});

// 是否显示导航栏取消按钮 - 用户不能自己取消操作
const showNavCancelButton = computed(() => {
  // 用户不能自己取消任何操作，返回false
  return false;
});
//#endregion
// 获取公寓的详情信息
const getAgreementDetailHandle = async () => {
  const { data } = await getAgreementDetailById(route.query.id as string);
  agreementDetailInfo.value = data;
  // 单独租期相关
  leaseTermInfo.value.text = data.leaseTermMonthCount + data.leaseTermUnit;
  leaseTermInfo.value.value = data.leaseTermId as string;
  // 单独支付方式相关
  paymentTypeInfo.value.text = data.paymentTypeName as string;
  paymentTypeInfo.value.value = data.paymentTypeId as string;
  //   如果是续约，允许修改，
  if (isAllowEdit.value) {
    // 重新计算起止日期
    // 结束日期变成开始日期
    agreementDetailInfo.value.leaseStartDate =
      agreementDetailInfo.value.leaseEndDate;
    // 结束日期变成开始日期+租期
    agreementDetailInfo.value.leaseEndDate = dayjs(
      agreementDetailInfo.value.leaseStartDate
    )
      .add(agreementDetailInfo.value.leaseTermMonthCount as number, "month")
      .format("YYYY-MM-DD");
    //   重置租约状态
    agreementDetailInfo.value.status = AgreementStatus.RENEW_TO_BE_CONFIRMED;
    //   重置租约来源
    agreementDetailInfo.value.sourceType = AgreementSource.RENEW;
  }
  //   如果是新增的续约,重置id为空
  isAddRenew.value && (agreementDetailInfo.value.id = "");
  //   如果是确认签约，修改状态为已签约，等待确认
  isConfirmAgreement.value &&
    (agreementDetailInfo.value.status = AgreementStatus.SIGNED);
};
// 更正租期和支付方式
const correctLeaseTermAndPaymentType = () => {
  // 修正租期，如果不存在就改为数组第一项
  let targetTerm =
    leaseTermList.value.find(
      item => item.id === agreementDetailInfo.value.leaseTermId
    ) || leaseTermList.value[0];
  if (targetTerm) {
    console.log("targetTerm", targetTerm);
    leaseTermInfo.value.text = targetTerm.monthCount + targetTerm.unit;
    leaseTermInfo.value.value = targetTerm.id as unknown as string;
  }
  //   修正支付方式，如果不存在就改为数组第一项
  let targetPaymentType =
    paymentTypeList.value.find(
      item => item.id === agreementDetailInfo.value.paymentTypeId
    ) || paymentTypeList.value[0];
  if (targetPaymentType) {
    console.log("targetPaymentType", targetPaymentType);
    paymentTypeInfo.value.text = targetPaymentType.name as string;
    paymentTypeInfo.value.value = targetPaymentType.id as unknown as string;
  }
};
// 跳转到公寓的详情页面
const goApartmentDetail = () => {
  router.push({
    path: "/apartmentDetail",
    query: { id: agreementDetailInfo.value.apartmentId }
  });
};
// 跳转到房间的详情页面
const goRoomDetail = () => {
  router.push({
    path: "/roomDetail",
    query: { id: agreementDetailInfo.value.roomId }
  });
};
// 续约,修改
const submitHandle = async () => {
  console.log("确认签约");
  try {
    // 租期时长不能小于支付方式月份长度
    let leaseTermMonthCount =
      leaseTermList.value.find(
        item => item.id === agreementDetailInfo.value.leaseTermId
      )?.monthCount || 0;

    console.log(leaseTermList.value);
    console.log(agreementDetailInfo.value);
    console.log("=============================");
    console.log("租期长度：" + leaseTermMonthCount);

    let paymentTypeMonthCount =
      paymentTypeList.value.find(
        item => item.id === agreementDetailInfo.value.paymentTypeId
      )?.payMonthCount || 0;

    console.log("支付月份长度：" + paymentTypeMonthCount);

    if (+leaseTermMonthCount < +paymentTypeMonthCount) {
      showToast({
        type: "fail",
        message: "租期时长不能小于支付方式月份长度"
      });
      return;
    }

    await saveOrUpdateAgreement(agreementDetailInfo.value);
    showToast({ type: "success", message: "操作成功" });
    router.back();
  } catch (error) {
    console.log(error);
  }
};

// 确认状态处理
const confirmStatusHandle = async () => {
  // 用户不能自己确认操作，只有管理员可以确认
  showToast({ type: "fail", message: "您没有权限执行此操作" });
  return;
  
  try {
    const status = agreementDetailInfo.value.status;
    let newStatus: number;
    
    // 根据当前状态确定新状态
    switch (status) {
      case AgreementStatus.WAITING: // 签约待确认 -> 已签约
        newStatus = AgreementStatus.SIGNED;
        break;
      case AgreementStatus.TO_BE_CONFIRMED: // 退租待确认 -> 已退租
        newStatus = AgreementStatus.CONFIRMED;
        break;
      case AgreementStatus.RENEW_TO_BE_CONFIRMED: // 续约待确认 -> 已签约
        newStatus = AgreementStatus.SIGNED;
        break;
      default:
        showToast({ type: "fail", message: "当前状态无法确认" });
        return;
    }
    
    await updateStatusById({
      id: agreementDetailInfo.value.id as string,
      leaseStatus: newStatus
    });
    
    showToast({ type: "success", message: "确认成功" });
    // 更新本地状态
    agreementDetailInfo.value.status = newStatus;
    // 返回上一页
    router.back();
  } catch (error) {
    console.log(error);
    showToast({ type: "fail", message: "确认失败，请重试" });
  }
};

// 取消状态处理
const cancelStatusHandle = async () => {
  // 用户不能自己取消操作，只有管理员可以取消
  showToast({ type: "fail", message: "您没有权限执行此操作" });
  return;
  
  try {
    const status = agreementDetailInfo.value.status;
    let newStatus: number;
    let actionText: string;
    
    // 根据当前状态确定取消后的状态
    switch (status) {
      case AgreementStatus.WAITING: // 签约待确认 -> 已取消
        newStatus = AgreementStatus.CANCELLED;
        actionText = "取消签约";
        break;
      case AgreementStatus.RENEW_TO_BE_CONFIRMED: // 续约待确认 -> 已取消
        newStatus = AgreementStatus.CANCELLED;
        actionText = "取消续约";
        break;
      default:
        showToast({ type: "fail", message: "当前状态无法取消" });
        return;
    }
    
    // 确认取消操作
    const confirmed = await new Promise((resolve) => {
      showDialog({
        title: '确认取消',
        message: `确定要${actionText}吗？此操作不可撤销。`,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        resolve(true);
      }).catch(() => {
        resolve(false);
      });
    });
    
    if (!confirmed) return;
    
    await updateStatusById({
      id: agreementDetailInfo.value.id as string,
      leaseStatus: newStatus
    });
    
    showToast({ type: "success", message: `${actionText}成功` });
    // 更新本地状态
    agreementDetailInfo.value.status = newStatus;
    // 返回上一页
    router.back();
  } catch (error) {
    console.log(error);
    showToast({ type: "fail", message: "取消失败，请重试" });
  }
};

// 获取状态类
const getStatusClass = (status) => {
  switch (status) {
    case '已签约':
    case '正常':
      return 'status-success'
    case '待签约':
    case '待确认':
      return 'status-warning'
    case '已到期':
    case '已退租':
      return 'status-danger'
    default:
      return 'status-info'
  }
}
onMounted(async () => {
  route.query.id && (await getAgreementDetailHandle());
  await getLeaseTermListHandle();
  await getPaymentTypeListHandle();
  //  如果允许修改，修正租期和支付方式
  isAllowEdit.value && correctLeaseTermAndPaymentType();
});
</script>

<style scoped>
/* 页面整体布局 */
.agreement-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
}

/* 背景装饰元素 */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.floating-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 10%;
  animation-delay: 2s;
}

.floating-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.floating-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  bottom: 10%;
  right: 20%;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(102, 126, 234, 0.1) 0%, 
    rgba(118, 75, 162, 0.1) 100%);
  pointer-events: none;
}

.page-content {
  position: relative;
  z-index: 1;
  padding: 20px 16px;
  padding-bottom: 100px;
}

/* 区块容器 */
.section-container {
  margin-bottom: 24px;
  animation: slideInUp 0.6s ease-out;
}

.section-container:nth-child(1) { animation-delay: 0.1s; }
.section-container:nth-child(2) { animation-delay: 0.2s; }
.section-container:nth-child(3) { animation-delay: 0.3s; }
.section-container:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 区块标题 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.section-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 18px;
}

.apartment-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.room-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.user-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.lease-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 卡片容器 */
.card-container {
  padding: 0 4px;
}

/* 现代卡片样式 */
.modern-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.modern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 公寓和房间卡片 */
.apartment-card, .room-card {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 16px;
}

.apartment-card::before {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.room-card::before {
  background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
}

.card-image-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  margin-right: 16px;
  flex-shrink: 0;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.modern-card:hover .card-image {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 12px;
}

.modern-card:hover .image-overlay {
  opacity: 1;
}

.view-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.image-error, .image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 12px;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.card-subtitle {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.location-icon {
  margin-right: 4px;
  color: #999;
}

.card-arrow {
  color: #999;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.modern-card:hover .card-arrow {
  transform: translateX(4px);
}

/* 用户信息卡片 */
.user-card {
  display: flex;
  align-items: flex-start;
  padding: 24px;
}

.user-card::before {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 28px;
  color: white;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.detail-icon {
  width: 20px;
  margin-right: 12px;
  color: #666;
  flex-shrink: 0;
}

.detail-label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
  margin-right: 12px;
}

.detail-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 租约详情卡片 */
.lease-card {
  padding: 24px;
}

.lease-card::before {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
}

.lease-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-row {
  display: flex;
  align-items: center;
}

.detail-item-large {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.detail-item-large:hover {
  background: rgba(248, 250, 252, 1);
  transform: translateX(4px);
}

.detail-content {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  flex: 1;
}

.detail-content .detail-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.detail-content .detail-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.price {
  color: #f56565;
  font-weight: 600;
  font-size: 18px;
}

.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-success {
  background: #c6f6d5;
  color: #22543d;
}

.status-warning {
  background: #fef5e7;
  color: #c05621;
}

.status-danger {
  background: #fed7d7;
  color: #c53030;
}

.status-info {
  background: #bee3f8;
  color: #2a69ac;
}

/* 图标颜色 */
.rent-icon {
  color: #f56565;
}

.deposit-icon {
  color: #48bb78;
}

.payment-icon {
  color: #4299e1;
}

.status-icon {
  color: #9f7aea;
}

/* 编辑操作 */
.edit-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.edit-btn {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  border-radius: 12px;
  height: 40px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 操作按钮 */
.action-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 20px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.action-wrapper {
  max-width: 400px;
  margin: 0 auto;
}

.confirm-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  border-radius: 16px;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.confirm-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}

.confirm-button:active {
  transform: translateY(0);
}

.button-icon {
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .page-content {
    padding: 16px 12px;
    padding-bottom: 100px;
  }
  
  .section-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .modern-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .apartment-card, .room-card {
    padding: 12px;
  }
  
  .card-image-wrapper {
    width: 60px;
    height: 60px;
    margin-right: 12px;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .card-subtitle {
    font-size: 12px;
  }
  
  .user-card {
    padding: 16px;
  }
  
  .user-avatar {
    width: 50px;
    height: 50px;
    margin-right: 16px;
  }
  
  .avatar-icon {
    font-size: 24px;
  }
  
  .user-name {
    font-size: 16px;
  }
  
  .detail-item-large {
    padding: 10px 12px;
  }
  
  .detail-content .detail-value {
    font-size: 14px;
  }
  
  .price {
    font-size: 16px;
  }
  
  .floating-shape {
    display: none;
  }
  
  .action-container {
    padding: 16px 12px;
  }
  
  .confirm-button {
    height: 44px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .user-details {
    gap: 8px;
  }
  
  .detail-item {
    padding: 6px 0;
  }
  
  .detail-label {
    min-width: 60px;
    font-size: 12px;
  }
  
  .detail-value {
    font-size: 12px;
  }
  
  .lease-details {
    gap: 12px;
  }
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.modern-card.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.base-info-title {
  font-weight: bold;
}

:deep(.van-card) {
  background: #fff;
}



/* 导航栏标题样式 */
:deep(.van-nav-bar__title) {
  font-weight: 600;
  font-size: 16px;
}

/* 导航栏背景 */
:deep(.van-nav-bar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  z-index: 1001 !important;
}

:deep(.van-nav-bar__title),
:deep(.van-nav-bar__left .van-icon) {
  color: white;
}

/* 底部按钮区域样式 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 16px 20px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  z-index: 1000;
  safe-area-inset-bottom: env(safe-area-inset-bottom);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.bottom-button {
  flex: 1;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.bottom-button.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
}

.bottom-button.confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.bottom-button.cancel-btn {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #6c757d;
}

.bottom-button.cancel-btn:hover {
  background: #e9ecef;
  border-color: #dee2e6;
  transform: translateY(-1px);
}

/* 为页面内容添加底部间距，避免被固定按钮遮挡 */
.agreement-page {
  padding-bottom: 80px;
}
</style>
